<template>
    <div class="log_manage_span">
        <table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :size-change="handleSizeChange" 
            :current-change="handleCurrentChange">
            <template v-slot:searchItem>
                <div class="search_item_fix_width">
                    <el-date-picker
                        v-model="dateInterval"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                        value-format="YYYY-MM-DD"
                    />
                </div>
                <div class="search_item_span search_item_input_width">
                    <el-input size="default" v-model="searchCondition.path"
                        placeholder="请输入请求地址" clearable></el-input>
                </div>
                <div class="search_item_span search_item_input_width">
                    <el-input size="default" v-model="searchCondition.resultCode"
                        placeholder="请输入业务状态码" clearable></el-input>
                </div>
                <div class="search_item_span search_item_input_width">
                    <el-input size="default" v-model="searchCondition.userCode"
                        placeholder="请输入用户编号" clearable></el-input>
                </div>
                <div class="search_item_span">
                    <el-button icon="Search" size="default" type="primary" @click="searchData">查询</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
                <el-table :data="tabelData.records" 
                :show-overflow-tooltip="true"
                :tooltip-options="tooltipOption"
                size="default" height="100%" style="width: 100%;" class="operate_log_table">
                    <el-table-column
                        align="center"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="serviceName"
                        label="服务模块"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="requestMethod"
                        label="请求方法"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="path"
                        label="请求地址"
                        min-width="240">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="requestParam"
                        label="请求参数"
                        width="240">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="httpStatus"
                        label="请求状态码"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="resultCode"
                        label="业务状态码"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="resultMessage"
                        label="业务状态描述"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="userCode"
                        label="用户编号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="createTime"
                        label="创建时间"
                        width="180">
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
    </div>
</template>
<script>
    import TableSpan from '@/components/table-span.vue';
    import {tool} from "@/js/tool.js";
    import { ElMessage } from 'element-plus'


    export default {
        name: "operateLog",
        data: function(){
            return {
                btOption: {
                    btLogList: null
                },
                tabelData: {
                    total: 0,
                    size: 10,
                    current: 1,
                    records: []
                },
                dateInterval: null,
                searchCondition: {
                    startDate: null,
                    endDate: null,
                    path: null,
                    resultCode: null,
                    userCode: null,
                    page: 1,
                    size: 10
                },
                tooltipOption: {
                    placement: 'bottom',
                    effect: 'dark'
                }
            }
        },
        methods: {
            searchData: function(){
                getShowDataList(this);
            },
            handleSizeChange: function(val){
                this.searchCondition.page = 1;
                this.searchCondition.size = val;
                getShowDataList(this);
            },
            handleCurrentChange: function(val){
                this.searchCondition.page = val;
                getShowDataList(this);
            }
        },
        created: function(){
            let date = this.$route.query.date;
            if(date){
                this.dateInterval = [date, date];
            }else{
                this.dateInterval = [getCurDate(), getCurDate()];
            }
            
            const menuId = [this.$route.query.menuId]
            const obj = this;
            new tool.getAuthorisedRequest(menuId, this.btOption, function(){
                getShowDataList(obj);
            });
        },
        components: {
            TableSpan
        }
    }

    /**
     * 获取操作日志列表
     * @param app app对象
     */
    function getShowDataList(app) {
        if(app.dateInterval == null || app.dateInterval.length != 2){
            ElMessage({
                showClose: true,
                message: '未设置开始结束时间',
                type: 'error'
            });
            return;
        }
        let param = app.searchCondition;
        param.startDate = app.dateInterval[0];
        param.endDate = app.dateInterval[1];
        const url = "/basic/log/getOperateList";
        tool.formJsonRequest(url,param,null,function(data){
            if(data.code === "0000"){
                const result = data.data;
                app.tabelData = {
                    total: result.total,
                    size: result.size,
                    current: result.current,
                    records: result.records
                }
            }else{
                ElMessage({
                    showClose: true,
                    message: data.message,
                    type: 'error'
                });
            }
        });
    }

    /**
     * 获取当前的日期
     */
    function getCurDate(){
        const curDate = new Date();
        return curDate.getFullYear() + '-' + ( curDate.getMonth() + 1 ).toString().padStart(2, '0') + '-' + curDate.getDate().toString().padStart(2, '0');
    }
</script>
<style>
    .log_manage_span{
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    }
    .search_item_span{
        max-width: 190px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
    .log_manage_span .search_item_fix_width{
        width: 370px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
    .log_manage_span .search_item_input_width{
        width: 200px;
        height: auto;
        margin-top: 5px;
        margin-left: 10px;
    }
    .operate_log_table .el-popper{
        width: 320px;
    }
</style>